<template>
  <view class="model-essay-box">
    <scroll-view scroll-x="true">
      <view class="model-essay-content">
        <view class="model-essay-item" v-for="(item, index) in modelEssayList" :key="index">
          <view class="zw-default-text1 one_line f15">{{item.title}}</view>
          <view class="content three_lines f14">{{item.content}}</view>
          <view class="zw-divider"></view>
          <view class="flex writer-box">
            <text class="f12 writer-name">{{item.writerName}}</text>
            <view class="as-writer" v-if="item.writerAs"><text class="vertical-bar">|</text>{{item.writerAs}}</view>
          </view>
          <view class="comments-text f14 two_lines">{{item.comments}}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>

export default {
  name: 'modelEssay',
  props: {
    modelEssayList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.model-essay-content {
  display: flex;
  flex-direction: row;
  .model-essay-item {
    width: 630rpx;
    flex: 1 0 630rpx;
    background: #fff9ea;
    border-radius: 26rpx;
    padding: 38rpx 28rpx;
    margin-right: 34rpx;
    box-sizing: border-box;
    .content {
      margin: 18rpx 0 28rpx;
      color: $uni-text-color01;
    }
    .writer-box {
      margin-top: 30rpx;
      .writer-name {
        color: #464646;
      }
      .as-writer {
        font-size: 22rpx;
        color: #4b4b4b;
      }
      .vertical-bar {
        margin: 0 8rpx;
      }
    }
    .comments-text {
      margin: 40rpx 0 38rpx 40rpx;
      font-weight: 500;
      color: #454545;
    }
  }
}
</style>
